<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取父节点和子节点</title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
</body>
<script type="text/javascript">
    //var ul = document.getElementsByTagName("ul")[0];
    //var ul = dpcument.qnerySelectorAll("ul")[0];
    //获取ul中所有的子节点数组
    var ul = document.querySelector("ul");
    console.log(ul.children);
    //获取ul中通过的第一个子节点
    var firstli = ul.firstElementChild;
    console.log(firstli);
    //获取ul中的最后一个子节点
    console.log(ul.lastElementChild);
    //获取firstli的父节点
    console.log(firstli.parentElement);

</script>
</body>
</html>